<template>
  <div>
    <div class="title">
      <div>
        <span>实时概况</span>
      </div>
      <div>
        <span>更新时间:</span>
      </div>
    </div>
    <el-row :gutter="40" class="top">
      <el-col :span="6">
          <el-card>
              
          </el-card>
          </el-col>
      <el-col :span="6"><el-card></el-card></el-col>
      <el-col :span="6"><el-card></el-card></el-col>
      <el-col :span="6"><el-card></el-card></el-col>
    </el-row>
    <el-row :gutter="40" class="middle">
      <el-col :span="12"><el-card></el-card></el-col>
      <el-col :span="12"><el-card></el-card></el-col>
    </el-row>
    <el-row :gutter="40" class="center">
      <el-col><el-card></el-card></el-col>
    </el-row>
    <el-row :gutter="40" class="foot">
      <el-col :span="12"><el-card></el-card></el-col>
      <el-col :span="12"><el-card></el-card></el-col>
    </el-row>
  </div>
</template>
<style scoped lang="less">
.title {
  display: flex;
  height: 60px;
  line-height: 60px;
  div:first-child {
    height: 60px;
    line-height: 60px;
    font-size: 26px;
    margin-right: 40px;
  }
}
.el-row {
  margin-bottom: 20px;
}
.top {
  .el-card {
    height: 140px;
  }
}
.middle {
  .el-card {
    height: 414px;
  }
}
.center {
  .el-card {
    height: 414px;
  }
}
.foot {
  .el-card {
    height: 342px;
  }
}
</style>
